<template>
  <div class="mutualAid">
    <div class="top_img" :style="'background-image: url(' + topBg + ')'">
      <span>
        {{ initData.goodsName }}
      </span>
    </div>
    <div class="main">
      <div class="col_title">
        {{ initData.goodsName }}
      </div>
      <div class="col_name_time">
        <span> 发布人：{{ initData.createdBy }} </span>
        <span>
          时间：
          {{
            $moment(parseInt(initData.createdAt)).format("YYYY-MM-DD HH:mm:ss")
          }}
        </span>
      </div>
      <div class="col_img">
        <img :src="initData.describeImgUrl" width="100%" alt="" />
      </div>
      <div class="col_comtent">
        {{ initData.describeText }}
      </div>

      <div class="col_comtent">
        <el-button type="primary" @click="clikcTask" v-if="!initData.userId"
          >接受互助任务</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { getByIdGoodsHelp, getGoodsHelpEdit } from "@/util/goodsHelp.js";

export default {
  data() {
    return {
      topBg:
        "http://175.178.92.128:8087/campus_help_system/images/insidePages/20190910163919740.jpg",
      initData: {},
    };
  },
  created() {
    this.getByIdGoodsHelp();
  },
  mounted() {},
  methods: {
    // 获取初始化数据
    async getByIdGoodsHelp() {
      let { data: res } = await getByIdGoodsHelp({
        id: this.$route.params.id,
      });
      this.initData = res.data;
    },
    // 点击任务
    clikcTask() {
      if (
        window.localStorage.getItem("id") == "" ||
        window.localStorage.getItem("id") == null
      ) {
        return this.$message.error("请先登录");
      }

      this.$confirm("是否劝人接受互助任务, 是请点击确认?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let query = {
            id: this.$route.params.id,
            userId: null,
            orderTime: null,
          };
          query.userId = window.localStorage.getItem("id");
          query.orderTime = new Date();
          let { data: res } = await getGoodsHelpEdit(query);
          if (res.status != 2000) {
            return this.$message.error(res.msg);
          }
          this.$message.success(res.msg);
          this.getByIdGoodsHelp();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.mutualAid {
  padding-bottom: 50px;
  .top_img {
    height: 280px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    & > span {
      font-size: 48px;
      font-weight: 700;
      color: #fff;
    }
  }
  .main {
    padding: 50px 0;
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    .col_title {
      font-size: 28px;
      margin-bottom: 24px;
    }
    .col_name_time {
      text-align: center;
      font-size: 14px;
      color: #999;
      margin-bottom: 24px;
      span {
        margin-right: 24px;
      }
    }
    .col_img {
      margin: 0 auto;
      width: 800px;
      margin-bottom: 48px;
    }
    .col_comtent {
      text-align: left;
      margin-bottom: 24px;
      font-size: 16px;
      line-height: 26px;
      color: #333;
      text-indent: 2em;
    }
  }
}
</style>
